.chat-bot {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #fff;
    .messsage-area {
        display: flex;
        flex-direction: column;
        /* 默认就是column，但明确写出以增强可读性 */
        height: 100%;
        /* 确保messsage-area占据其父元素的全部高度 */
    }
    .input-area {
        padding: 0.6rem;
        align-items: center;
        position: absolute;
        width: 100%;
        bottom: 0;
        .input-panel {
            border-radius: 5px;
            max-width: 90%;
            margin: 0 auto;
            .ai-input-area{
                margin-left: 10px;
            }
        }
    }
}

.user-message {
    background-color: #f6f6fd;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.assitant-message {
    background-color: #fff;
    border-bottom: 1px solid #e5e7eb;
}

.message {
    margin: 0 auto;
    max-width: 98%;
    display: flex;
}

.message-container {
    padding-bottom: 120px;
}


.no-message-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    h1 {
        font-size: 2rem;
        font-weight: 500;
    }
}

:deep(.md-editor-preview-wrapper) {
    padding: 0px;
}
.top-menu {
    display: flex;
    justify-content: flex-end; /* 将按钮放在右边 */
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 按钮之间的间距 */
    padding: 10px; /* 内边距，可以根据需要调整 */
  }

  .top-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* 按钮的宽度 */
    height: 30px; /* 按钮的高度 */
    border-radius: 50%; /* 圆形按钮 */
    background-color: #ffffff; /* 白色背景 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.2s; /* 平滑过渡效果 */
  }

  .top-menu-button:hover {
    background-color: #f0f8ff; /* 悬停时的背景颜色 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 悬停时的阴影效果 */
  }
  .selected-image {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      top: -5px;
      right: -5px;
      width: 10px;
      height: 10px;
      background-color: red;
      border-radius: 50%;
    }
  }
  @media screen and (max-width: 768px) {
    .chat-bot{
        .input-area{
            padding: 0;
            .file-btn{
                margin-left: vw(-10);
            }
        }
    }
  }